<template>
  <div class="tb-content">
    <p>订单列表</p>
    <el-table
      ref="multipleTable"
      :data="arr"
      style="width: 100%  "
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="订单编号" width="150"></el-table-column>
      <el-table-column prop="name" label="用户微信" width="100"></el-table-column>
      <el-table-column prop="phone" label="会员手机" width="120"></el-table-column>
      <el-table-column prop="classname" label="课程名称" width="150"></el-table-column>
      <el-table-column prop="money" label="订单金额(元)" width="120"></el-table-column>
      <el-table-column prop="state" label="订单状态" width="100">
        <template slot-scope="scope">{{typeObj[scope.row.state]}}</template>
      </el-table-column>
      <el-table-column prop="time" label="提交时间" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openDialog(scope.row.id)">查看</el-button>
          <el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="checkbox">
      <input type="checkbox" class="check" name=" " @click="fu" />
      <span class="qx">全选</span>
      <el-button @click="plDeleteTable">批量删除</el-button>
    </div>
  </div>
</template>

<script>
import { delOrder, plDelete } from "../../../api/order/Order.js";
export default {
  props: ["arr"],
  data() {
    return {
      typeObj: {
        0: "待支付",
        1: "已关闭",
        2: "待确认",
        3: "学习中",
        4: "已完成"
      },

      multipleSelection: []
    };
  },
  watch: {
    multipleSelection() {
      if (this.multipleSelection.length == this.arr.length) {
        document.querySelector(".check").checked = true;
      } else {
        document.querySelector(".check").checked = false;
      }
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    openDialog(id) {
      console.log(id);
      this.$emit("openDialog", id);
    },
    handleDelete(id) {
      console.log(id);
      delOrder({ id: id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$emit("resetFather");
        }
      });
    },
    fu() {
      if (event.target.checked) {
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    plDeleteTable() {
      console.log("批量删除");
      let ids = " ";
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          ids += item.id + ",";
        });
      }
      console.log(ids);
      plDelete(ids).then(res => {
        if (res.code == 200) {
          this.$emit("resparFun");
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.tb-content {
  background: #fff;
  p {
    // height: 52px;
    background: #fff;
    padding: 18px 30px;
    font-size: 14px;
    font-weight: bold;
  }
  /deep/.el-table-column--selection {
    .cell {
      padding-left: 41px;
    }
  }
  /deep/ .has-gutter {
    .el-table__cell {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      background-color: rgba(224, 224, 224, 0.5);
    }
  }

  /deep/.cell {
    text-align: center;
    // overflow: none;
    .el-button--default {
      background-color: #409eff;
      color: #fff;
    }
    .el-button--danger {
      background-color: #f9f9f9;
      color: #606266;
      border: 1px solid #dcdfe6;
    }
  }
  .checkbox {
    margin: 10px 20px;
    padding-bottom: 10px;
    .check {
      display: inline-block;
      border-color: #dcdfe6;
      width: 14px;
      height: 14px;
      margin: 0 5px 0 20px;
      vertical-align: middle;
    }
    .qx {
      margin-right: 20px;
      vertical-align: middle;
    }
  }
}
</style>